/******************************************************************************************
 * Import
 ******************************************************************************************/

// module
import React, {Component} from 'react';
import {TextInput} from 'react-native';
import { Switch, Icon} from 'antd-mobile-rn';

// project
import {
    CAround, CBetween, CCenter, CColumn, CHand, CItemX, CItemY, CLine, CRow, CWrap, 
    CIcon, CImage, CSvg, CText,
    CContent, CFloat, CFooter, CHeader, CPage, CSide, 
    CEmpty, CError, CFail, CSkeleton, 
    CLabel, CButton
} from '../../../library/comp';

import Licon from '../../../library/comp/project/icon';


/******************************************************************************************
 * Export Class
 ******************************************************************************************/

export default class UserSystem extends Component {

    /*------------------------------------------------------------------------------------
	 * 初始化
	 *-----------------------------------------------------------------------------------*/
	constructor(props) {
        super(props);
        // this.Nav = this.props.navigation;
        
        /**
         * state
         */
		this.state = {
			switch: false
		};
    }
    
    /*------------------------------------------------------------------------------------
	 * 自定义方法
	 *-----------------------------------------------------------------------------------*/
    /**
     * switch按钮发生改变时调用的方法，改变变量的值
     */
    onSwitchChange = (value)=>{
        this.setState({
            switch: value
        })
    }

	/*------------------------------------------------------------------------------------
	 * 渲染
	 *-----------------------------------------------------------------------------------*/
	render() {
		return (
			<CPage>
				{/* 用户可以对系统进行的设置操作 */}
				<CContent mt='136' bg='#efeff4'>

                    {/* 是否开启手机开门功能 */}
                    <CRow pa='20' bg='#fff' bb='solid #f0f0f0 2'>
                        <CHand f='1'><CText size="26">手机开门</CText></CHand>
                        <CHand f='1' x='right'><Switch checked={this.state.switch} onChange={this.onSwitchChange}></Switch></CHand>
                    </CRow>

                    {/* 是否开启自动开门功能 */}
                    <CRow pa='20' bg='#fff' bb='solid #f0f0f0 2'>
                        <CHand f='1'><CText size="26">自动开门</CText></CHand>
                        <CHand f='1' x='right'><Switch checked={this.state.switch} onChange={this.onSwitchChange}></Switch></CHand>
                    </CRow>

                    {/* 是否允许开门语音提示 */}
                    <CRow pa='20' bg='#fff' bb='solid #f0f0f0 2'>
                        <CHand f='1'><CText size="26">允许开门语音提示</CText></CHand>
                        <CHand f='1' x='right'><Switch checked={this.state.switch} onChange={this.onSwitchChange}></Switch></CHand>
                    </CRow>

                    {/* 是否接收视频看货功能 */}
                    <CRow pa='20' bg='#fff' bb='solid #f0f0f0 2'>
                        <CHand f='1'><CText size="26">接收视频看货</CText></CHand>
                        <CHand f='1' x='right'><Switch checked={this.state.switch} onChange={this.onSwitchChange}></Switch></CHand>
                    </CRow>

                    {/* 是否开启安全锁车功能 */}
                    <CRow pa='20' bg='#fff' bb='solid #f0f0f0 2'>
                        <CHand f='1'><CText size="26">安全锁车</CText></CHand>
                        <CHand f='1' x='right'><Switch checked={this.state.switch} onChange={this.onSwitchChange}></Switch></CHand>
                    </CRow>

                    {/* 设置语音提示最小间隔 */}
                    <CRow px='20' py="30"  bg='#fff' bb='solid #f0f0f0 2'>
                        <CHand f='1'><CText size="26">语音提示最小间隔</CText></CHand>
                        <CHand f='1' x='right' y='center'>
                            <TextInput underlineColorAndroid="transparent" multiline = {true} style={{ height:20, borderBottomWidth:0 }} value='10' editable={true}></TextInput>
                            <CText>10分钟</CText>
                        </CHand>
                    </CRow>

                    {/* 对讲/门铃的入口 */}
                    <CRow px='20' py="30" bg='#fff' bb='solid #f0f0f0 2'>
                        <CHand f='1'><CText size="26">对讲/门铃</CText></CHand>
                        <CHand f='1' x='right'></CHand>
                    </CRow>

                    {/* 一键开门快捷键设置 */}
                    <CRow px='20' py="30" bg='#fff'>
                        <CHand f='1'><CText size="26">一键开门快捷键</CText></CHand>
                        <CHand f='1' x='right'></CHand>
                    </CRow>

                    {/* 清除缓存的操作 */}
                    <CRow bg='#fff' px='20' py="30" mt='32' bb='solid #f0f0f0 2'>
                        <CHand f='1'><CText size="26">清除缓存</CText></CHand>
                        <CHand f='1' x='right'><CText color='#d2d2d2' size='28'>当前缓存3.4M</CText></CHand>
                    </CRow>

                    {/* 当前版本 */}
                    <CRow bg='#fff' px='20' py="30">
                        <CHand f='1'><CText size="26">当前版本</CText></CHand>
                        <CHand f='1' x='right'><CText color='#d2d2d2' size='28'>v.4.9.2</CText></CHand>
                    </CRow>

                    {/* 注销登录的按钮 */}
                    <CRow bg='#fff' x='center' y='center' my='32' pa='20'>
                        <CText color='#f00' size="26">注销登录</CText>
                    </CRow>

				</CContent>

                {/* 顶部 star */}
                <CHeader h='96' y='center' bg='#fff' style={{ borderBottomColor:"#eee", borderBottomWidth:1 }}>
                    <CBetween px='20'>
                        <CHand onPress={(e)=> {
                            this.Nav.goBack()
                        }}>
                            <Icon type='left' size='md' color='#00CC66' />
                        </CHand>

                        <CText size='34'>系统设置</CText>
                        <CHand w='44' h='44'></CHand>
                    </CBetween>
                </CHeader>
                {/* 顶部 star */}
				

			</CPage>
		);
	}
}
